{% extends 'base_2.html' %}
{% load thumbnail %}
{% block content %}
    {% if data.count > 0 %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>索引</th>
                    <th>型号</th>
                    <th>尺寸</th>
                    <th>颜色</th>
                    <th>客户</th>
                    <th>顶视图</th>
                </tr>
                </thead>
                <tbody>
                {% for d in data %}
                    <tr>
                        <td>{{ d.id }}</td>
                        <td>{{ d.marker }}</td>
                        <td>{{ d.size }}</td>
                        <td>{{ d.color }}</td>
                        <td>{{ d.customer }}</td>
                        <td>
                            {% thumbnail d.image_top "100x100" crop="center" as im %}
                                <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
                            {% endthumbnail %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div>无对应型号</div>
    {% endif %}
    <div class="row">
        <div class="col-md-2 col-lg-offset-2">
            <button data-izimodal-close="" class="button btn-success" id="btn_ok">确定</button>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        $(document).ready(function () {
            var td_selected = null;
            sessionStorage.setItem("id", "");
            sessionStorage.setItem("image_url", "");
            sessionStorage.setItem("wheel_size", "");

            $("tr").click(function (evt) {
                $("tr.info").removeClass("info");
                $(this).addClass("info");
                td_selected = $(this).find("td");
            });

            $("#btn_ok").click(function (evt) {
                evt.preventDefault();
                console.log("关闭轮型选择模态窗口");
                if (td_selected != null) {
                    var id = td_selected.eq(0).html();
                    var url = td_selected.eq(4).html();
                    var size = td_selected.eq(2).html();
                    console.log("id:" + id + ",url:" + url + ",wheel_size:" + size);
                    sessionStorage.setItem("id", id);
                    sessionStorage.setItem("image_url", url);
                    sessionStorage.setItem("wheel_size", size);
                }
            });
        });
    </script>

{% endblock %}